<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="style.css" type="text/css">
        <script src="alert.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
            <form action="" method="post">
                <div>
                <label>账号:</label>
                <input type="text" name="username" id="username" value="">
                </div>
                <div>
                <label>密码:</label>
                <input type="password" name="password" id="password" value="">
                </div>
                <div>
                <label>手机号码:</label>
                <input type="text" name="phone" id="phone" value="">
                </div>
                <div>
                <label>邮箱:</label>
                <input type="text" name="email" id="email" value="">
                </div>
            </form>

            <script type="text/javascript">
                var username = document.querySelector("#username");
                username.onchange = function(){
                    var reg = /^[1-9]\d{4,11}$/;
                    if(!reg.test(username.value)){
                        wtalert({
                            title:"账号输入错误！",
                            content:"请输入5到11位数字"
                        });
                    };
                };
            
               var password = document.querySelector("#password");
                password.onchange = function () {
                    var reg = /^.{8,}$/;
                    if (!reg.test(password.value)) {
                        wtalert({
                            title: "密码格式输入错误！",
                            content: "请输入至少8位密码！"
                        });
                    };
                };
                
                 var email = document.querySelector("#email");
                    email.onchange = function () {
                        var reg = /^\w+@\w+(\.[A-z]+)+$/;
                        if (!reg.test(email.value)) {
                            wtalert({
                                title: "邮箱输入格式错误！",
                                content: "请检查格式！"
                            });
                        };
                    };
                    
                    var phone = document.querySelector("#phone");
                        phone.onchange = function () {
                            var reg = /^\d{11}$/;
                            if (!reg.test(phone.value)) {
                                wtalert({
                                    title: "电话号码输入错误！",
                                    content: "请输入11位电话号码！"
                                });
                            };
                        };
            </script>
    </body>
</html>